<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 左侧内容 -->
      <el-col :span="13" style="padding-right:26px" class="left">
        <el-card>
          <!-- 放置Eacharts -->
          <Left />
        </el-card>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span="11">
        <el-card class="box-card">
          <!-- 放置Eacharts -->
          <Right />
        </el-card>
      </el-col>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import Left from './components/left.vue'
import Right from './components/right.vue'
export default {
  name: 'Dashboard',
  components: { Left, Right },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    await store.dispatch('user/getUserInfo')
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }

    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }

  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
</style>

